<template>
	<view class="container">
		<monthly-title v-if="currentValue.type === 0" class="logo" title="发展里程检表(机构端)"></monthly-title>
		<monthly-title v-else-if="currentValue.type === 1" class="logo" title="发展里程检表(家庭端)"></monthly-title>
		<monthly-title v-else-if="currentValue.type === 2" class="logo" title="发展里程检表(小群体课程)"></monthly-title>
		<monthly-title v-else class="logo" title="发展里程检表"></monthly-title>
		<view class="border">
			<view class="dashed">
				<view class="item" v-for="(item, index) in currentValue.list">
					<view class="top">
						<view class="title">
							{{index + 1}} {{item.target}}
						</view>
						<u-icon name="question-circle" @click="questionClick(index)"></u-icon>
					</view>
					<view>
						<u-radio-group v-model="item.states" @change="radioGroupChange">
							<u-radio name="1" :disabled="true">已达到</u-radio>
							<u-radio name="2" :disabled="true">发展中</u-radio>
							<u-radio name="3" :disabled="true">尚未达成</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MonthlyTitle from './monthly-title.vue'
	export default {
		components: {
			MonthlyTitle
		},
		props: {
			value: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		computed: {
			currentValue: {
			  get () {
				return this.value
			  },
			  set (val) {
				  console.log(val)
				  this.$emit('input', val)
			  }
			},
		},
		data() {
			return {
				show: false,
				form: {},
				d1: 0,
				d2: 1,
				d3: 2
			}
		},
		created() {
			this.form = { ...this.currentValue }
		},
		methods: {
			questionClick(index) {
				const details = this.currentValue.list[index].details
				uni.showModal({
					title: '提示',
					content: details,
					showCancel: false,
					success: function (res) {
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>

	.container{
		background-repeat: repeat;
		background-image: url('https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/yb_four_1.png');

		.logo{
			margin-left: 27rpx;
		}
		
		.border{
			border: 2rpx solid #552323;
			border-radius: 50rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;
			
			.dashed{
				border: 2rpx dashed #552323;
				border-radius: 50rpx;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				
				.item{
					display: flex;
					flex-direction: column;
					margin-bottom: 30rpx;
					
					.top{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-bottom: 10rpx;
						
						.title{
							font-size: 26rpx;
							color: #333333;
							margin-right: 10rpx;
						}
					}
					
				}
				
			}
		}
	}
</style>